<!--
 * @Author: hutong huareu980@163.com
 * @Date: 2023-06-01 22:10:29
 * @LastEditors: hutong huareu980@163.com
 * @LastEditTime: 2023-06-13 18:46:25
 * @FilePath: /smart-web-app/components/pageLayout.vue
 * @Description: 
-->
<template>
  <div class="page-layout">
    <div class="page-layout__left">
      <h2>{{ title }}</h2>
      <ul>
        <li
          :class="{ 'left-active': item.id === current }"
          v-for="item in list"
          :key="item.id"
          @click="onClick(item.id)"
        >
          {{ $t(item.title) }}
        </li>
      </ul>
    </div>
    <div class="page-layout__right">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface PropsType {
  modelValue?: string;
  title: string;
  list?: Array<{ id: string; title: string }>;
}
const props = withDefaults(defineProps<PropsType>(), {
  modelValue: "",
  title: "",
  list: () => [],
});
const current = ref("");

watch(
  () => props.modelValue,
  (nVal) => {
    current.value = nVal;
  },
  {
    immediate: true,
  }
);
const emit = defineEmits(["update:modelValue"]);

const onClick = (id: string) => {
  current.value = id;
  emit("update:modelValue", current.value);
};
</script>
<style scoped lang="scss">
ul,
li {
  list-style: none;
}
.page-layout {
  display: flex;
  overflow: hidden;
  &__left {
    width: 240px;
    h2 {
      font-size: 24px;
    }
    ul {
      margin-top: 20px;
      li {
        padding: 10px 0;
        padding-left: 10px;
        font-size: 20px;
        &:hover {
          cursor: pointer;
        }
      }
      .left-active {
        background-color: #ebebeb;
        position: relative;
        color: $primary;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 4px;
          background-color: $primary;
        }
      }
    }
  }
  &__right {
    flex: 1;
    margin-left: 20px;
    overflow: hidden;
    font-size: 18px;
    line-height: 40px;
  }
}
</style>
